<template>
  <div class="icon-picker-demo pa-4">
    <v-card class="mx-auto" max-width="600">
      <v-card-title>图标选择器演示</v-card-title>
      
      <v-card-text>
        <v-row>
          <v-col cols="12">
            <v-text-field
              v-model="selectedIcon"
              label="选中的图标"
              readonly
              append-inner-icon="mdi-magnify"
              @click:append-inner="showIconPicker"
            >
              <template v-slot:prepend-inner>
                <v-icon 
                  v-if="selectedIcon" 
                  :icon="selectedIcon" 
                  class="mr-2" 
                  color="primary"
                ></v-icon>
                <v-icon 
                  v-else
                  icon="mdi-image-outline" 
                  class="mr-2" 
                  color="grey"
                ></v-icon>
              </template>
            </v-text-field>
          </v-col>
          
          <v-col cols="12">
            <v-btn 
              color="primary" 
              @click="showIconPicker"
              block
            >
              选择图标
            </v-btn>
          </v-col>
          
          <v-col cols="12" v-if="selectedIcon">
            <v-alert type="success" variant="tonal">
              <div class="d-flex align-center">
                <v-icon :icon="selectedIcon" class="mr-3" size="32"></v-icon>
                <div>
                  <div class="font-weight-bold">已选择图标</div>
                  <div class="text-caption">{{ selectedIcon }}</div>
                </div>
              </div>
            </v-alert>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <!-- 图标选择器 -->
    <IconPicker
      v-model:visible="iconPickerVisible"
      v-model="selectedIcon"
      @confirm="onIconSelected"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import IconPicker from './IconPicker.vue';

const selectedIcon = ref('mdi-home');
const iconPickerVisible = ref(false);

const showIconPicker = () => {
  iconPickerVisible.value = true;
};

const onIconSelected = (icon: string) => {
  console.log('选择了图标:', icon);
};
</script>

<style scoped>
.icon-picker-demo {
  min-height: 100vh;
  background: #f5f5f5;
}
</style> 